<%= render "shared/error_messages", resource: @cold_message.message %>

<div class="min-h-full flex flex-col py-12 sm:px-6 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-lg">
    <h1 class="sm:mt-6 text-3xl font-extrabold text-gray-900 ml-6">
      <%= t(".title") %>
    </h1>

    <div class="flex items-center space-x-2 mt-2 text-sm text-gray-600 ml-6">
      <div class="block"><%= t(".with") %></div>
      <%= link_to developer_path(@cold_message.developer), class: "flex items-center space-x-2 group" do %>
        <%= render AvatarComponent.new(avatarable: @cold_message.developer, variant: :thumb, classes: "h-8 w-8") %>
        <span class="font-medium text-gray-600 group-hover:text-gray-500"><%= @cold_message.developer.name %></span>
      <% end %>
    </div>

    <%= render RoleTypes::ColdMessageComponent.new(@cold_message.developer.role_type) %>
  </div>

  <div class="mt-12 sm:mt-20 sm:mx-auto sm:w-full sm:max-w-xl">
    <% if policy(@cold_message.message).create? %>
      <div class="flex items-start sm:space-x-4">
        <div class="hidden sm:block shrink-0">
          <%= render AvatarComponent.new(avatarable: @cold_message.business, variant: :thumb, classes: "inline-block h-10 w-10 rounded-full") %>
        </div>

        <div class="min-w-0 flex-1 px-4 sm:px-0">
          <%= form_with model: [@cold_message.developer, @cold_message.message], class: "relative" do |form| %>
            <%= render "messages/form", form: form, terms: @cold_message.show_hiring_fee_terms %>
          <% end %>

          <div class="prose prose-sm mt-10 md:mt-20">
            <%= render MarkdownComponent.messaging_tips %>
          </div>
        </div>
      </div>
    <% else %>
      <%= render Businesses::UpgradeRequiredComponent.new(current_user) %>
    <% end %>
  </div>
</div>
